<template>
  <div class="app-container">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="">
        <el-input v-model="formInline.codeCreater" placeholder="编码 创建人"></el-input>
      </el-form-item>
      <el-form-item label="编码状态">
        <el-select v-model="formInline.codeState" placeholder="待提交">
          <el-option label="已提交" value="已提交"></el-option>
          <el-option label="待提交" value="待提交"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search()" style="margin-left: 500px"  icon="el-icon-search">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10">
      <el-col :span="1.5">
        <el-button
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd()"
        >新建</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-edit"
          size="mini"
          @click="handleUpdate()"
        >编辑</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-circle-check"
          size="mini"
          @click="handleSubmit()"
        >提交</el-button>
      </el-col>
      <el-col :span="1.5">
          <el-button
            type="info"
            plain
            icon="el-icon-refresh-right"
            size="mini"
            @click="handleWithdraw()"
          >撤回</el-button>
        </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          @click="handleDelete()"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-search"
          size="mini"
          @click="handleSearch()"
        >查看</el-button>
      </el-col>
    </el-row>

    <!--  ref给组件取名  -->
    <el-table
      ref="tableData"
      :data="tableData"
      tooltip-effect="dark"
      border
      stripe
      style="width: 100%"
      @row-click="singleElection">

      <el-table-column label="勾选" width="65" align="center">
        <template slot-scope="scope">
          <el-radio
            class="radio"
            v-model="templateSelection"
            :label="scope.$index"
          >&nbsp;
          </el-radio>
        </template>
      </el-table-column>

      <el-table-column
        prop="codeType"
        label="编码类型"
        align="center">
      </el-table-column>
      <el-table-column
        prop="code"
        label="编码"
        align="center">
      </el-table-column>
      <el-table-column
        prop="codeState"
        label="编码状态"
        align="center">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.codeState === '待提交' ? 'primary' : 'success'"
            disable-transitions>{{scope.row.codeState}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="creater"
        label="创建人"
        align="center">
      </el-table-column>
      <el-table-column
        prop="createDate"
        label="创建时间"
        align="center">
      </el-table-column>
    </el-table>

    <dialog-component v-if="Visible" ref="dialogComponent" @show="showFather"></dialog-component>

    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[30, 60, 90, 120]"
      :page-size="100"
      layout="total, sizes, prev, pager, next"
      :total="679"
       style="margin-top: 30px;margin-left: 500px">
      </el-pagination>
  </div>
</template>

<script>
// 引入组件
import dialogComponent from "./dialogComponent.vue";
import Cookies from "js-cookie"
import { listUser } from '@/api/system/user'
import { listBigcustomer,addBigcustomer } from '@/api/flow/bigcustomer'
export default {
  name: 'Apply',
  data() {
    return {
      formInline: {
        codeCreater: '',
        codeState: ''
      },
      templateSelection: "",
      selectData:null,
      codeform: {},
      tableData: [{
        codeType: '项目级',
        code: 'A32HJ432LKH333',
        codeState: '待提交',
        creater: 'staff',
        createDate: '2022-05-03',
        rejectReason: '规则不符合'
      }, {
        codeType: '项目级',
        code: 'H324J5KJ2K',
        codeState: '待提交',
        creater: 'staff',
        createDate: '2022-05-03',
        rejectReason: '重复'
      }, {
        codeType: '项目级',
        code: '432GKGK42K3KLL2',
        codeState: '待提交',
        creater: 'staff',
        createDate: '2022-05-03',
        rejectReason: '类型错误'
      }, {
        codeType: '项目级',
        code: '432HKJGK32KK3K',
        codeState: '待提交',
        creater: 'staff',
        createDate: '2022-03-03',
        rejectReason: '重复'
      }, {
        codeType: '企业级',
        code: '43J2K4GK3K33',
        codeState: '待提交',
        creater: 'staff',
        createDate: '2022-06-03',
        rejectReason: '编码错误'
      }, {
        codeType: '项目级',
        code: '42JK3G234',
        codeState: '待提交',
        creater: 'staff',
        createDate: '2022-05-03',
        rejectReason: '规则不符合'
      }, {
        codeType: '企业级',
        code: '432KK23G',
        codeState: '待提交',
        creater: 'staff',
        createDate: '2022-05-03',
        rejectReason: '重复'
      }],
      multipleSelection: [],
      currentPage: 4,
      Visible: false
    }
  },
  methods: {
    filterTag(value, row) {
      return row.tag === value;
    },
    filterHandler(value, row, column) {
      const property = column['property'];
      return row[property] === value;
    },
    showFather(code,codeType){


      const strTime = this.timeFormate();
      this.tableData.splice(0,0,{
        codeType: codeType,
        code: code,
        codeState: '待提交',
        creater: 'staff',
        createDate: strTime,
        rejectReason: ''
      })
    },

    // 获取当前时间
    timeFormate() {
      const nowTime = new Date();
      let year = nowTime.getFullYear();
      let month =nowTime.getMonth() + 1 < 10? "0" + (nowTime.getMonth() + 1): nowTime.getMonth() + 1;
      let date =nowTime.getDate() < 10? "0" + nowTime.getDate(): nowTime.getDate();
      // let hh =nowTime.getHours() < 10? "0" + new Date(timeStamp).getHours(): new Date(timeStamp).getHours();
      // let mm =nowTime.getMinutes() < 10? "0" + new Date(timeStamp).getMinutes(): new Date(timeStamp).getMinutes();
      // let ss =nowTime.getSeconds() < 10? "0" + new Date(timeStamp).getSeconds(): new Date(timeStamp).getSeconds();
      // let week = new Date(timeStamp).getDay();
      // let weeks = ["日","一","二","三","四","五","六"];
      // let getWeek = "星期" + weeks[week];
      const strnowTime = year + "-" + month + "-" + date;
      return strnowTime;
    },

    search() {

    },
    // 单选方法
    singleElection(row) {
      console.log(row);
      this.templateSelection = this.tableData.indexOf(row);
      console.log(this.templateSelection);
      this.templateRadio = row.id;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    handleAdd() {
      this.Visible = true;
      this.$nextTick(() => {
        //这里的dialog与上面dialog-component组件里面的ref属性值是一致的
        //init调用的是dialog-component组件里面的init方法
        //data是传递给弹窗页面的值
        this.$refs.dialogComponent.init(0);
      });
      console.log(Cookies.get("code"))
    },
    handleUpdate() {

    },
    /***  提交***/
    handleSubmit() {
      // 点击提交后存入cookies
      Cookies.set("row",this.tableData[this.templateSelection])
      if(this.tableData[this.templateSelection].codeState === "已提交"){
        this.$modal.msgWarning("已提交，请勿重复提交");
      }else{
        // 这里调用创建流程方法
        this.tableData[this.templateSelection].codeState = "已提交"

        let str = "code: "+this.tableData[this.templateSelection].code+"   编码类型: "+this.tableData[this.templateSelection].codeType
        this.codeform.customerName = str
        addBigcustomer(this.codeform).then(response => {
          this.$modal.msgSuccess("提交成功");
        });

      }

      // this.tableData.splice(this.templateSelection,1)

      // // 接受表格中的列值
      // const param1 = this.tableData[this.templateSelection].code;
      // const param2 = this.tableData[this.templateSelection].codeType;
      // console.log("###############",this.tableData[this.templateSelection])
      // console.log("@@@@@@@@@@@@2@@@@@@@@@@",param1)
      // // 构造传递的参数
      // const postForm ={customerName:param1,taskName:param2}
      //
      // //调用后端接口
      // addBigcustomer(postForm).then(response => {
      //   this.$modal.msgSuccess("新增成功");
      //   // this.open = false;
      //   // this.getList();
      // });


    },
    handleWithdraw() {

    },
    handleDelete() {

    },
    handleSearch() {

    }
  },
  // 注册组件
  components: {
    dialogComponent,
  }
}
</script>

<style scoped>
.el-row {
  margin-bottom: 20px;
 }
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
/deep/.el-radio .el-radio__label{
  display: none;
}
</style>
